<template>
  <div class="app-container">
    <div class="header flex">
      <FormSearch :formFields="searchList" @search="Search" @reset="Search"></FormSearch>
    </div>
    <div class="footer">
      <a-table :columns="columns" :data-source="state.data" rowKey="id" :pagination="state.pagination"
        @change="pageChange" :loading="state.loading" :scroll="{ x: 1200 }">
        <template #bodyCell="{ record, column }">
          <template v-if="column.dataIndex === 'audit_status'">
            <span>{{
              record.audit_status === 0
              ? "待审核"
              : record.audit_status === 1
                ? "已审核"
                : record.audit_status === 2
                  ? "已拒绝"
                  : "-"
            }}</span>
          </template>
          <template v-if="column.dataIndex === 'actions'">
            <a-button type="link" :disabled="record.audit_status !== 0" @click="handleVerified(record)">审核</a-button>
          </template>
        </template>
      </a-table>
    </div>
    <examine ref="examineRef" @modal-success="refresh" />
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { verifyList } from "@/api/user";
import examine from "./components/examine.vue";

const examineRef = ref();
const searchList = reactive([
  {
    type: "select", //类型
    label: "状态", //标签
    name: "type", //字段
    value: null,
    options: [
      { id: 1, name: "待审核" },
      { id: 2, name: "已审核" },
      { id: 3, name: "已拒绝" },
    ],
    placeholder: "请选择状态",
    allowClear: true,
  },
]);
const columns = [
  {
    title: "id",
    dataIndex: "verify_id",
    width: 100,
  },
  {
    title: "姓名",
    dataIndex: "name",
    width: 100,
  },
  {
    title: "手机号",
    dataIndex: "user",
    width: 150,
    customRender(record) {
      return record.value?.mobile || "-";
    },
  },
  {
    title: "身份证号码",
    dataIndex: "card_no",
    width: 200,
  },
  {
    title: "状态",
    dataIndex: "audit_status",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width: 200,
  },
  {
    title: "操作",
    dataIndex: "actions",
    fixed: "right",
    width: 100,
  },
];
const state = reactive({
  data: [],
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 10, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    page: 1,
    limit: 10,
  },
});

const getList = () => {
  state.loading = true;
  verifyList({
    ...state.searchParams,
  }).then((res) => {
    setTimeout(function () {
      state.loading = false;
    }, 500);
    if (res.code == 0) {
      const data = res.data;
      state.data = data.data;
      state.pagination.total = data.total;
    }
  });
};
//搜索事件
const Search = (values) => {
  state.searchParams.page = 1;
  //合并之前的搜索参数
  state.searchParams = {
    ...state.searchParams,
    ...values,
  };
  //搜索
  getList();
}
//分页变动数据
const pageChange = (pagination) => {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  //搜索的参数
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;
  //搜索
  getList();
}

const handleVerified = (record) => {
  examineRef.value.show(record);
};
const refresh = () => {
  getList();
};
getList();
</script>
<style scoped lang="scss">
@import "./index";
</style>
